<template>
  <div class="maphouse">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>地图找房</span>
      <span class="return" @click="back()">&lt;</span>
    </header>
    <main>
      <div class="header">
        <!-- 搜索 -->
        <div class="check">
          <select v-model="buySelect">
            <option v-for="(item,index) in buyRegion" :key="index">{{item}}</option>
          </select>
          <div class="input">
            <input type="text" placeholder="请在这里输入区域/商圈" />
            <span>
              <van-icon name="search" />
            </span>
          </div>
        </div>

        <!-- 标签页 -->
        <div class="label">
          <router-link v-for="(item,index) in labelList" :key="index" :to="item.path">
            <dl>
              <dt>
                <van-icon :name="item.url" />
              </dt>
              <dd>{{item.name}}</dd>
            </dl>
          </router-link>
        </div>

        <!-- 筛选页 -->
        <div class="screening">
          <span v-for="(item,index) in screeningList" :key="index">
            {{item.name}}
            <van-icon name="arrow-down" />
          </span>
        </div>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  name: "mapHouse",
  data() {
    return {
      buyRegion: ["北京", "上海", "深圳", "广东"],
      buySelect: "上海",
      labelList: [
        {
          name: "买房",
          url: "wap-home-o",
          path: "/mapHouse/map-buy"
        },
        {
          name: "租房",
          url: "hotel-o",
          path: "/mapHouse/map-rent"
        }
      ],
      screeningList: [
        {
          name: "区域"
        },
        {
          name: "价格"
        },
        {
          name: "户型"
        },
        {
          name: "筛选"
        }
      ]
    };
  },
  created() {},
  methods: {
    //点击返回上一级
    back() {
      this.$router.push(`/`);
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body,
html,
.maphouse {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.maphouse header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  /* display: flex;
    align-items: center;
    justify-content: space-around; */
  text-align: center;
  line-height: 60px;
}

.maphouse header span {
  color: white;
  float: right;
  margin-right: 60px;
}

.maphouse header .logo {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}

.maphouse header .return {
  float: left;
  margin-left: 30px;
}

.maphouse main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.maphouse main .check {
  width: 100%;
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 15px;
}

.maphouse main .check select {
  border: none;
  margin-left: 10px;
  background-color: white;
  outline: none;
}

.maphouse main .check .input {
  margin-left: 20px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  width: 210px;
  height: 30px;
  display: flex;
}

.maphouse main .check .input span {
  margin-top: 2px;
}

.maphouse main .check .input input {
  flex: 1;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  font-size: 12px;
}

.maphouse main .check > span {
  margin-left: 15px;
}

.maphouse main .label {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid black;
}

.maphouse main .label dl {
  float: left;
  width: 50%;
  height: 80px;
  text-align: center;
  margin-top: 20px;
  line-height: 24px;
}

.maphouse main .label dl dt i {
  font-size: 36px;
}

.maphouse main .label a{
    color: #b3b3b3;
}

.maphouse main .label .router-link-exact-active {
  color: #fd9b3c;
}

.maphouse main .screening {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid black;
}

.maphouse main .screening span i {
  vertical-align: middle;
}

.maphouse main .main {
  flex: 1;
  overflow-y: auto;
}
</style>